<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 150px;
      height: 150px;
      background-color: pink;

      /* 方案1：给父级添加上边框 */
      /* 
         border-top: 1px solid #000;
         border: 1px solid #000;
      */

       /* 如果不想将边框显示出来,我们可以将边框设置为透明的transparent,这样就解决了嵌套块元素垂直外边距的塌陷问题 */
       /* border-top: 1px solid transparent; */
       /* border: 1px solid transparent; */

      /* 方案2：给父级添加上内边距(推荐方案)
         可以给padding-top:1px;来解决。
         也可以padding-top:20px;来替代margin-top:20px;。
      */
      /* padding-top: 1px; */
      /* padding-top: 20px; */

      /* 方案3：给父级添加 overflow: hidden; */
      overflow: hidden;
    }

    .son {
      width: 80px;
      height: 80px;
      background-color: purple;
      margin-top: 20px;
    }

    /* 注意：不是所有的父包子一定会出现塌陷，这要看父盒子，如果父盒子是flex伸缩盒或者是定位就不会有塌陷的问题了。 */
  </style>
</head>

<body>
  <div class="father">
    <div class="son">
    </div>
  </div>
</body>

</html>